<script setup lang="ts">
import tinycolor2 from 'tinycolor2'
import { SizeUtil } from '@xtail/ui'
import { NodeGradientDynamicBorderPropsType } from './types'

defineOptions({
  name: 'SNodeGradientDynamicBorder'
})

withDefaults(defineProps<NodeGradientDynamicBorderPropsType>(), {
  color: '#333',
  bgOpacity: 0.3,
  customBorderColor: false,
  borderColor: 'transparent',
  borderWidth: '2px',
  borderRadius: '0.25rem',
  rotate: true,
  speed: '5s',
  shine: false,
  shineRange: '10px',
  shineBrightness: 0.8,
  hover: false,
  hoverPause: false
})
</script>

<template>
  <div
    class="s-node-gradient-dynamic-border-container flow-node-base"
    :style="{ '--border-radius': SizeUtil.unitPreHandler(borderRadius) }"
  >
    <s-gradient-dynamic-border
      class="s-node-gradient-dynamic-border"
      bg-color="var(--vf-node-bg)"
      :custom-border-color="customBorderColor"
      :border-color="borderColor"
      :border-color-list="['transparent 0%', `${color} 100%`]"
      :border-width="borderWidth"
      :border-radius="borderRadius"
      :rotate="rotate"
      :speed="speed"
      :shine="shine"
      :shine-range="shineRange"
      :shine-brightness="shineBrightness"
      :hover="hover"
      :hover-pause="hoverPause"
    >
      <div
        class="s-node-gradient-dynamic-border__content flow-node-base-padding"
        :style="{ background: tinycolor2(color).setAlpha(bgOpacity).toRgbString() }"
      >
        <slot />
      </div>
    </s-gradient-dynamic-border>
  </div>
</template>

<style lang="scss">
@use './style' as *;
</style>
